<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Elix Tabs - tab positions and alignment</title>

    <link rel="stylesheet" href="demos.css" />
    <script type="module" src="../define/Tabs.js"></script>
  </head>

  <body role="main">
    <div class="demo padded">
      <script>
        function tabAlignChange(event) {
          document.querySelector(".tabPositions").tabAlign = event.target.value;
        }

        function tabPositionChange(event) {
          document.querySelector(".tabPositions").proxyListPosition =
            event.target.value;
        }
      </script>

      <style>
        .tabPositions {
          height: 250px;
          max-height: 100%;
          max-width: 100%;
          width: 300px;
        }

        .tabPositions .panel {
          align-items: center;
          background: white;
          border: 1px solid #ccc;
          box-sizing: border-box;
          display: flex;
          flex: 1;
          justify-content: center;
        }
      </style>

      <elix-tabs class="tabPositions">
        <div class="panel" aria-label="One">Page one</div>
        <div class="panel" aria-label="Two">Page two</div>
        <div class="panel" aria-label="Three">Page three</div>
      </elix-tabs>

      <p>
        Show tabs on:
        <select id="tabPosition" onchange="tabPositionChange(event)">
          <option value="bottom">Bottom</option>
          <option value="left">Left</option>
          <option value="right">Right</option>
          <option value="top" selected>Top</option>
        </select>
      </p>
      <p>
        Align tabs:
        <select id="tabAlign" onchange="tabAlignChange(event)">
          <option value="center">Center</option>
          <option value="end">End</option>
          <option value="start" selected>Start</option>
          <option value="stretch">Stretch</option>
        </select>
      </p>
    </div>
  </body>
</html>
